// 实现这个项目的构建任务
const {src, dest, parallel, series, watch} = require("gulp")

const del = require("del")

const browserSync = require("browser-sync")
const bs = browserSync.create()

const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins();

const data = {
    menus: [{
        name: "Home",
        icon: "aperture",
        link: "index.html"
    },{
        name: "Features",
        link: "features.html"
    }],
    pkg: require("./package.json"),
    date: new Date
}

const clean = () => {
    return del(['dist', 'temp']);
}
const style = () => {
    return src('src/assets/styles/*.scss', {base : 'src'})
            .pipe(plugins.sass({
                outputStyle: 'expended'
            }))
            .pipe(dest('temp'))
            .pipe(bs.reload({ 
                stream: true
            })) // bs 载入 stream 流的方式执行
}
const script = () => {
    return src('src/assets/script/*.js', {base : 'src'})
            .pipe(plugins.babel({
                presets: ['@babel/preset-env']
            }))
            .pipe(dest('temp'))
            .pipe(bs.reload({
                stream: true
            }))
}
const page = () => {
    return src('src/*.html', {base: 'src'})
            .pipe(plugins.swig({
                data
            }))
            .pipe(dest('temp'))
            .pipe(bs.reload({
                stream: true
            }))
}
const image = () => {
    return src("src/assets/images/**", {base: "src"})
        .pipe(plugins.imagemin())
        .pipe(dest("dist"))
}

const font = () => {
    return src("src/assets/fonts/**", {base: "src"})
        .pipe(plugins.imagemin())
        .pipe(dest("dist"))
}

const extra = () => {
    return src("public/**", {base: "public"})
        .pipe(dest("dist"))
}
const useref = () => {
    return src('temp/*.html', {base : 'temp'})
            .pipe(plugins.useref({
                searchPath: ['temp', '.']
            }))
            .pipe(plugins.if(/\.js$/, plugins.uglify()))
            .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
            .pipe(plugins.if(/\.html$/, plugins.htmlmin({
                collapseWhitespace: true,
                minifyCSS: true,
                minifyJS: true
            })))
            .pipe(dest('dist'))
}

const server = () => {
    watch('src/assets/styles/*.scss', style);
    watch('src/assets/scripts/*.js', script);
    watch('src/*.html*', page);
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload);
    bs.init({
        notify: false,
        port: 2080,
        // open: false,
        files: "dist/**",
        server: {
            baseDir: "dist",
            routes: {
                "/node_modules": "node_modules"
            }
        }
    })
}
const compile = parallel(style, script, page);
const build = series(
    clean, 
    parallel(
        series(compile, useref),
        image,
        font, 
        extra
    )
)
const develop = series(compile, server)

module.exports = {
    compile,
    build,
    develop
}